<template>
	<view>
		<uNavbar title="完拼分奖" bgColor="transparent"></uNavbar>
		<!-- 顶部view -->
		<view class="header_v">
			<!-- 可领取收益 -->
			<text class="lab_shouyi">可领取收益：{{ data.bonus }}福合通宝</text>
			<!-- 累计奖励 -->
			<text class="lab_total">已累计分的奖励：{{ data.total_bonus }}福合通宝</text>
			<!-- 领取 -->
			<view class="receive_btn" :style="data.is_receive? 'opacity:1':'opacity:0.6' " @click="submitClick">
				<text>领到钱包</text>
			</view>
		</view>
		<view class="midd_v">
			<!-- 战力值 -->
			<view class="zhanli_v v_css">
				<text class="lab_tit">我的完拼卡数量</text>
				<view class="cardwrap">
					<view class="cardwrapitem">
						<image src="/static/image/carimg.png" mode=""></image>
						<text>{{data.card_number}}</text>
					</view>
					<view class="cardwrapitem">
						<image src="/static/image/phoneimg.png" mode=""></image>
						<text>{{data.phone_number}}</text>
					</view>
				</view>
			</view>
			<!-- 本期奖金已累计 -->
			<view class="total_v v_css">
				<text class="lab_tit">奖金累计额（福合通宝）</text>
				<text class="lab_total_bonus">{{ data.issue_total_bonus }}</text>
				<text class="lab_tit" style="font-size: 20rpx;color:#A6A5AF;" >数据统计日期  {{data.cumulative_time}}</text>
			</view>
		</view>
		<!-- 温馨提示 -->
		<view class="hint_v">
			<text>温馨提示</text>
		</view>
		<text class="des_v">
			<text class="lab_des">{{ data.tip }}</text>
		</text>
		
		<!-- 提示框u-popup -->
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="lab_title">提示</text>
				<text class="prompt_tit">您确定要领取{{ data.bonus }}福合通宝到钱包吗？</text>
				
				<view class="prompt_cencel btn_tit" @click="cencelClick">
					<text>取消</text>
				</view>
				
				<view class="prompt_submit btn_tit" @click="receiveClick">
					<text>确认</text>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script setup>
	
	import {
		bonusPage,
		bonusReceive,
		} from "../../api/mycar.js"
	
	export default {
		data() {
			return {
				tipShow:false,
				data: {}
				
			}
		},
		onLoad() {
			
			// 获取详情数据
			this.getData()
		},
		methods:{
			
			// 获取详情数据
			getData() {
				bonusPage().then(res => {
					console.log(res)
					if (res.code == 1) {
						if(res.data.is_complete==0){
							uni.$u.toast("您当前未持有完拼卡，不符合分奖资格")
						}
						this.data = res.data;
						console.log(this.data)
					}
				})
			},
			// 领取钱包
			submitClick() {
				if (this.data.is_receive == 1) {
					this.tipShow = true
				}
			},
			// 弹框点击事件
			cencelClick() {
				this.tipShow = false
			},
			// 领取
			receiveClick() {
				bonusReceive().then(res => {
					console.log(res)
					this.tipShow = false
					if (res.code == 1) {
						uni.$u.toast(res.msg)
						this.getData()
					}
				})
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}
	
	.header_v {
		position: relative;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		margin-top: 30rpx;
		width: 690rpx;
		height: 150rpx;
		border-radius: 16rpx;
		background-color: #F2EFEC;
		.lab_shouyi {
			margin: 0 auto;
			margin-top: 28rpx;
			margin-left: 24rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: #333;
			width: 650rpx;
			line-height: 36rpx;
		}
		.lab_total {
			margin: 0 auto;
			margin-top: 22rpx;
			margin-left: 24rpx;
			font-size: 24rpx;
			color: #A6A5AF;
			width: 650rpx;
			line-height: 36rpx;
		}
		.receive_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			right: 24rpx;
			bottom: 48rpx;
			width: 154rpx;
			height: 54rpx;
			border-radius: 27rpx;
			background: linear-gradient(274deg, #AB8E68, #D7BA93);
			>text {
				font-size: 26rpx;
				
				color: #fff;
				text-align: center;
				letter-spacing: 2rpx;
			}
		}
	}
	.midd_v {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top: 22rpx;
		margin-left: 30rpx;
		width: 690rpx;
		height: 156rpx;
		.v_css {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			width: 330rpx;
			height: 156rpx;
			border-radius: 12rpx;
			background-color: #F2EFEC;
		}
		.zhanli_v {
			margin-left: 0;
			.lab_tit {
				margin: 0 auto;
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #666666;
				line-height: 36rpx;
			}
			.lab_zhanli {
				margin: 0 auto;
				margin-top: 14rpx;
				font-size: 40rpx;
				font-family: iconfont2;
				color: #666666;
				line-height: 36rpx;
				width: 100%;
				text-align: center;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
		.total_v {
			margin-right: 0;
			.lab_tit {
				margin: 0 auto;
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #666666;
				line-height: 36rpx;
			}
			.lab_total_bonus {
				margin: 0 auto;
				margin-top: 14rpx;
				font-size: 40rpx;
				font-family: iconfont2;
				color: #666666;
				line-height: 36rpx;
				width: 100%;
				text-align: center;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
	.hint_v {
		display: flex;
		margin: 0 auto;
		margin-top: 50rpx;
		margin-left: 30rpx;
		height: 36rpx;
		>text {
			font-size: 26rpx;
			font-weight: 700rpx;
			line-height: 36rpx;
			color: #666;
		}
	}
	.des_v {
		display: flex;
		margin: 0 auto;
		margin-top: 12rpx;
		margin-left: 30rpx;
		width: 690rpx;
		.lab_des {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.prompt {
		width: 600rpx;
		min-height: 400rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #333;
		padding-top: 30rpx;
		
		.prompt>text {
			margin-top: 40rpx;
		}
		
		.lab_title {
			font-size: 32rpx;
			color: #333;
			margin-top: 40rpx;
		}
		
		.prompt_tit {
			margin: 0 30rpx;
			margin-top: 20rpx;
			width: 448rpx;
			font-size: 28rpx;
			color: #333;
			text-align: center;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			// -webkit-line-clamp: 2;
			overflow: hidden;
		}
		
		.btn_tit {
			display: flex;
			//绝对定位
			position: absolute;
			justify-content: center;
			font-size: 28rpx;
			width: 220rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 36rpx;
		}
		.prompt_cencel {
			//边框
			border: 2rpx solid #AB8E68;
			color: #A68A64;
			bottom: 44rpx;
			left: 64rpx;
		}
		.prompt_submit {
			//渐变
			background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
			color: #ffffff;
			bottom: 44rpx;
			right: 64rpx;
		}
	}
	.cardwrap{
		width: 330rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.cardwrapitem{
			display: flex;
			align-items: center;
			>image{
				width: 32rpx;
				height: 32rpx;
			}
			>text{
				font-weight: 400;
				font-size: 48rpx;
				color: #A68A64;
				font-family: iconfont2;
				margin-left: 20rpx;
			}
		}
	}
</style>